<template>
  <div class="bottom_group">
    <div class="bottom_bar_wrapper">
      <router-link class="bar_item home" to="/freelance/index">首页</router-link>
      <router-link class="bar_item pro" to="/freelance/project">项目</router-link>
      <router-link class="bar_item resume"  to="/freelance/resume">人才</router-link>
      <router-link class="bar_item user" to="/freelance/me">我的</router-link>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bottom_group {
  position: relative;
  width: 100%;
  height: 55px;
  .bottom_bar_wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    display: flex;
    z-index: 9;
    &::after {
      position: fixed; box-sizing: border-box; content: ' '; pointer-events: none; right: 0; bottom: 55px; left: 0;
      border-bottom: 1PX solid #e2e2e2; -webkit-transform: scaleY(.5); transform: scaleY(.5);
    }
    .bar_item {
      &.home {
        background: url("../../assets/freelance/images/resumelist_15.png") center 9px no-repeat;
        background-size: 19px 19px;
      }
      &.pro {
        background: url("../../assets/freelance/images/resumelist_18.png") center 9px
          no-repeat;
        background-size: 20px 19px;
      }
      &.resume {
        background: url("../../assets/freelance/images/resumelist_20.png") center 9px no-repeat;
        background-size: 19px 19px;
      }
      &.user {
        background: url("../../assets/freelance/images/resumelist_22.png") center 9px no-repeat;
        background-size: 19px 19px;
      }
      &.router-link-active {
        &.home {
          background: url("../../assets/freelance/images/sel_resumelist_15.png") center 9px
            no-repeat;
          background-size: 19px 19px;
        }
        &.pro {
          background: url("../../assets/freelance/images/sel_resumelist_18.png") center 9px
            no-repeat;
          background-size: 20px 19px;
        }
        &.resume {
          background: url("../../assets/freelance/images/sel_resumelist_20.png") center 9px
            no-repeat;
          background-size: 19px 19px;
        }
        &.user {
          background: url("../../assets/freelance/images/sel_resumelist_22.png") center 9px
            no-repeat;
          background-size: 19px 19px;
        }
        color: #333333;
      }
      flex: 1;
      font-size: 11px;
      color: #a0adc8;
      padding: 36.5px 0 6.5px;
      height: 55px;
      text-align: center;
    }
  }
}
</style>
